<template>
	<view class="main">
		<view class="main-black"></view>
		<view class="hd-top"></view>
		<view class="head">
			<view @tap='goBack' class="">
				<image class="hd-img" src="../../../../static/goLogin/left.png" mode=""></image>
			</view>
			<view class="hd-text">
				我的会员
			</view>
		</view>
		<view class="head-down">
			<view class="hdown-left">
				<view class="hdown-left-left">
					<image src="../../../../static/goLogin/yh.png" mode=""></image>
					<image src="../../../../static/goLogin/yh.png" mode=""></image>
					<image src="../../../../static/goLogin/yh.png" mode=""></image>
				</view>
				<view class="hdown-left-right">
					5593人已开通会员
				</view>
			</view>
			<view class="hdown-right">
				购买查询
			</view>
		</view>
		<view class="yellow-bg">
			<view class="ybg">
				<image class="ybg-img-tou" src="" mode=""></image>
				<view class="">
					<view class="">
						<view class="ybg-text-top">
							立即登录
							<view class="ybg-text-top-grey">
								会员
							</view>
						</view>
					</view>
					<view class="ybg-text-down">
						开通会员尊享VIP权益
					</view>
				</view>
				
			</view>
		</view>
		<view class="chose-three">
			<template  v-for="item in vipData">
				<view @tap="noPay" :key='item._id' class="chose-box" :class="{normal:!item.type}" >
					<view v-if="item.type" class="tuijian"  mode="">推荐</view>
					<view class="chose-box-one">
						{{item.mouth}}个月
					</view>
					<view class="chose-box-two">
						<view class="chose-box-xtwo">
							￥
						</view>
						{{item.salePrice}}
					</view>
					<view class="chose-box-three">
						￥{{item.normalPrice}}
					</view>
				</view>
			</template>
		</view>
		<view class="goNow">
			<view class="goNow-up">
				<view class="goNow-up-gx">
					恭喜
				</view>
				<view class="goNow-up-moreText">
					您获得2折开通会员特权！
				</view>
			</view>
			<view @tap="noPay" class="goNow-btn">立即开通</view>
		</view>
		<view class="vipAuth">
			<view class="vipAuth-total">
				VIP特权
			</view>
			<view class="vipAuth-list">
				<image class="vipAuth-list-img" src="../../../../static/goLogin/caipu.png" mode=""></image>
				<view class="vipAuth-list-text">
					<view class="vipAuth-list-text-top">
						1000+精品名厨菜谱
					</view>
					<view class="vipAuth-list-text-down">
						大咖教学，轻松学会
					</view>
				</view>
			</view>
			<view class="vipAuth-list">
				<image class="vipAuth-list-img" src="../../../../static/goLogin/new.png" mode=""></image>
				<view class="vipAuth-list-text">
					<view class="vipAuth-list-text-top">
						每周上新
					</view>
					<view class="vipAuth-list-text-down">
						新菜持续更新中
					</view>
				</view>
			</view>
			<view class="vipAuth-list">
				<image class="vipAuth-list-img" src="../../../../static/goLogin/ad.png" mode=""></image>
				<view class="vipAuth-list-text">
					<view class="vipAuth-list-text-top">
						会员免广告打扰
					</view>
					<view class="vipAuth-list-text-down">
						体验更流畅
					</view>
				</view>
			</view>
			<view class="vipAuth-list">
				<image class="vipAuth-list-img" src="../../../../static/goLogin/biaoshi.png" mode=""></image>
				<view class="vipAuth-list-text">
					<view class="vipAuth-list-text-top">
						VIP尊贵身份标识
					</view>
					<view class="vipAuth-list-text-down">
						随时随地、与众不同
					</view>
				</view>
			</view>
		</view>
		<view class="shuoming">
			<view class="shuoming-total">
				会员使用说明
			</view>
			<view class="miaoshu">
				<text class="huanhang">1.会员服务一经开通，不支持退款；</text>
				<text class="huanhang">2.如遇到苹果手机支付问题，建议参考Apptore支付流程;</text>
				<text class="huanhang">3.若会员开通出现异常，请立即联系客服，我们会在2个工作日内出处理结果。</text>
				<text class="huanhang">4.会员常见问题、会员服务协议、会员隐私协议。</text>
			</view>
		</view>
		<view v-show="isShow"  class="zhezhao">
			<view  class="zhezhao-main">
				<view class="zhezhao-main-total">
					<view class="" @tap="closeBox">
						<image @ class="zhezhao-main-img" src="../../../../static/goLogin/x.png" mode=""></image>
					</view>
					开通VIP会员
				</view>
				<template v-for="item in vipData">
					<view @tap="chosePrice" :mark:buyMouth='item.mouth' :key='item._id' class="chose-box" :class="{normal:nowMouth!=item.mouth}" >
						<view v-if="item.type" class="tuijian"  mode="">即将涨价</view>
						<view class="chose-box-one">
							{{item.mouth}}个月
						</view>
						<view class="chose-box-two">
							<view class="chose-box-xtwo">
								￥
							</view>
							{{item.salePrice}}
						</view>
						<view class="chose-box-three">
							￥{{item.normalPrice}}
						</view>
					</view>
				</template>
				<view class="goNow">
					<view class="goNow-up">
						<view class="goNow-up-gx">
							恭喜
						</view>
						<view class="goNow-up-moreText">
							开通后立即全站去广告、免费看10000+名厨视频
						</view>
					</view>
					<view @tap='buyNow' class="goNow-btn" type="default">立即购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow:false,
				vipData:[],
				nowPrice:'612cae6f2c43000023001282',//当前选中的价格
				nowMouth:'12',//购买月份
			}
		},
		methods: {
			async buyNow(){//立即购买
			console.log(this.$store.state);
				const res = await this.$request({
					url:'/user/openVip',
					header:{
						Authorization:this.$store.state.token
					},
					data:{
						_id:this.$store.state.userInfo._id,
						date:this.nowMouth
					}
				})
				console.log(res);
				if(res.code){
					uni.showLoading({
						title: res.msg,
						duration: 1000,
					});
					this.isShow=false
				}
			},
			goBack(){//返回上一页
				uni.navigateBack({
					delta:1
				})
			},
			chosePrice(e){//购买月份，改变样式
				this.nowMouth=e.mark.buyMouth
			},
			noPay(){
				this.isShow=true
			},
			closeBox(){
				this.isShow=false
			},
			getTopupList(){
				new Promise((resolve, reject) => {
					uni.getStorage({
						key: 'token',
						success: e => {
							resolve(e)
						}
					})
				}).then(async (e) => {
					const res = await this.$request({
						url: '/user/topupList',
						header: {
							Authorization: e.data
						},
					})
					if(res.meta.status==200){
						this.vipData=res.data
					}
				})
			}
		},
		onLoad(){
			this.getTopupList()
		}
	}
</script>

<style lang="scss" scoped>
*{
	margin: 0;
	padding: 0;
}
.main{
	width: 100%;
	position: relative;
	.main-black{
		position: absolute;
		height: 330rpx;
		width: 100%;
		background-color: #313131;
		border-bottom-left-radius: 10%;
		border-bottom-right-radius: 10%;
		z-index: -1;
	}
	.hd-top{
		height: 90rpx;
		width: 100%;
		position:fixed;
		background-color: #313131;
		top: 0;
		z-index: 1;
	}
	.head{
		z-index: 1;
		top: 90rpx;
		background-color: #313131;
		position:fixed;
		box-sizing: border-box;
		padding: 0 32rpx;
		height: 80rpx;
		width: 100%;
		display: flex;
		align-items: center;
		.hd-img{
			width: 30rpx;
			height: 34rpx;
		}
		.hd-text{
			color: #eaeaea;
			flex-grow: 1;
			text-align: center;
		}
	}
	.head-down{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 170rpx;
		height: 48rpx;
		width: 100%;
		margin-bottom: 28rpx;
		.hdown-left{
			width: 434rpx;
			height: 48rpx;
			background-color: #5c5c5c;
			border-top-right-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			box-sizing: border-box;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.hdown-left-left{
				flex-grow: 1;
				position: relative;
				display: flex;
				align-items: center;
				image{
					width: 36rpx;
					height: 36rpx;
				}
			}
			.hdown-left-right{
				flex-grow: 1;
				color: #FFFFFF;
				font-size: 24rpx;
			}
		}
		.hdown-right{
			margin-right: 32rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}
	.yellow-bg{
		width: 100%;
		height: 302rpx;
		margin-bottom: 44rpx;
		.ybg{
			margin: 0 auto;
			background-image: url(../../../../static/goLogin/bg-yellow-vip.png);
			background-repeat: no-repeat;
			background-size: 100%;
			box-sizing: border-box;
			padding: 80rpx 0 126rpx 64rpx;
			display: flex;
			.ybg-img-tou{
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				background-color: red;
				margin-right: 18rpx;
			}
			.ybg-text-top{
				color: #7b5b21;
				font-weight: 600;
				font-size: 38rpx;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				.ybg-text-top-grey{
					margin-left: 8rpx;
					color: #fbedc5;
					padding: 0rpx 20rpx;
					width: 60rpx;
					height: 40rpx;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 30rpx;
					background-color: #a5a5a5;
				}
			}
			.ybg-text-down{
				color: #7b5b21;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
	}
	.chose-three{
		width: 100%;
		box-sizing: border-box;
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		.chose-box{
			height: 232rpx;
			width: 212rpx;
			border: 1rpx solid #dcb66a;
			border-radius: 15rpx;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			padding: 48rpx 0 24rpx 0 ;
			position: relative;
			.chose-box-one{
				text-align: center;
				width: 100%;
				font-weight: 800;
				font-size: 30rpx;
			}
			.chose-box-two{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 40rpx;
				font-weight: 800;
				color: #deb264;
				.chose-box-xtwo{
					font-weight: 400;
					font-size: 30rpx;
				}
			}
			.chose-box-three{
				width: 100%;
				text-decoration: line-through;
				text-align: center;
				font-size: 38rpx;
				color: #a49fa0;
			}
			.tuijian{
				position: absolute;
				top: -20rpx;
				background-size: 100%;
				width: 98rpx;
				height: 48rpx;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
				background-repeat: no-repeat;
				background-image: url(../../../../static/goLogin/tuijian.png);
			}
		}
		.normal{
			border: 1rpx solid #e0e0e0;
		}
	}
	.goNow{
		margin-top: 26rpx;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		height: 154rpx;
		margin-bottom: 74rpx;
		.goNow-up{
			height: 38rpx;
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 34rpx;
			.goNow-up-gx{
				background-repeat: no-repeat;
				background-image: url(../../../../static/goLogin/gongxi.png);
				background-size: 100%;
				width: 92rpx;
				height: 42rpx;
				line-height: 42rpx;
				text-align: center;
				color: #deb264;
			}
			.goNow-up-moreText{
				color: #7b5b21;
				margin-left: 10rpx;
			}
		}
		.goNow-btn{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 16rpx;
			text-align: center;
			color: #a98c4f;
			font-weight: 800;
			background-color: #fcf1d3;
		}
	}
	.vipAuth{
		height: 676rpx;
		width: 100%;
		background-color: #f5f5f5;
		box-sizing: border-box;
		padding: 28rpx 0;
		.vipAuth-total{
			box-sizing: border-box;
			padding:0 32rpx;
			font-size: 46rpx;
			font-weight: 500;
			width: 100%;
			background-color: #FFFFFF;
			padding-bottom: 22rpx;
		}
		.vipAuth-list{
			height: 136rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 32rpx;
			background-color: #FFFFFF;
			padding-bottom: 50rpx;
			padding-top: 20rpx;
			display: flex;
			border-bottom: 1rpx solid #f5f5f5;
			.vipAuth-list-img{
				width: 90rpx;
				height: 90rpx;
				margin-right: 44rpx;
			}
			.vipAuth-list-text{
				display: flex;
				flex-wrap: wrap;
				.vipAuth-list-text-top{
					font-size: 32rpx;
					color: #484848;
					width: 100%;
				}
				.vipAuth-list-text-down{
					width: 100%;
					font-size: 24rpx;
					color: #aaaaaa;
				}
			}
		}
	}
	.shuoming{
		width: 100%;
		padding: 20rpx 32rpx 52rpx 32rpx;
		box-sizing: border-box;
		.shuoming-total{
			color: #484848;
			width: 100%;
			font-size: 40rpx;
		}
		.miaoshu{
			color: #b7b7b7;
			font-size: 28rpx;
			line-height: 40rpx;
			.huanhang{
				display: block;
				width: 100%;
			}
		}
	}
	.zhezhao{
		position: absolute;
		top: 0;
		z-index: 2;
		height: 100%;
		background-color: rgba(80, 80, 80, 0.7);
		width: 100%;
		.zhezhao-main{
			height: 560rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 22rpx 32rpx 0 32rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.zhezhao-main-total{
				position: relative;
				height: 74rpx;
				width: 100%;
				text-align: center;
				.zhezhao-main-img{
					position: absolute;
					z-index: 99;
					left: 0;
					top: 6rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}
			.chose-box{
				height: 232rpx;
				width: 212rpx;
				border: 1rpx solid #dcb66a;
				border-radius: 15rpx;
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				padding: 48rpx 0 24rpx 0 ;
				position: relative;
				.chose-box-one{
					text-align: center;
					width: 100%;
					font-weight: 800;
					font-size: 30rpx;
				}
				.chose-box-two{
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 40rpx;
					font-weight: 800;
					color: #deb264;
					.chose-box-xtwo{
						font-weight: 400;
						font-size: 30rpx;
					}
				}
				.chose-box-three{
					width: 100%;
					text-decoration: line-through;
					text-align: center;
					font-size: 38rpx;
					color: #a49fa0;
				}
				.tuijian{
					position: absolute;
					top: -35rpx;
					left: -6rpx;
					background-size: 100%;
					width: 158rpx;
					height: 56rpx;
					color: #FFFFFF;
					line-height: 68rpx;
					text-align: center;
					background-repeat: no-repeat;
					background-image: url(../../../../static/goLogin/zhangjia.png);
				}
			}
			.normal{
				border: 1rpx solid #e0e0e0;
			}
			.goNow{
				margin-top: 26rpx;
				width: 100%;
				padding: 0 32rpx;
				box-sizing: border-box;
				height: 154rpx;
				margin-bottom: 74rpx;
				.goNow-up{
					height: 38rpx;
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 34rpx;
					.goNow-up-gx{
						background-repeat: no-repeat;
						background-image: url(../../../../static/goLogin/gongxi.png);
						background-size: 100%;
						width: 92rpx;
						height: 42rpx;
						line-height: 42rpx;
						text-align: center;
						color: #deb264;
					}
					.goNow-up-moreText{
						color: #2c2c2c;
						margin-left: 10rpx;
						font-size: 24rpx;
					}
				}
				.goNow-btn{
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 16rpx;
					text-align: center;
					color: #a98c4f;
					font-weight: 800;
					background-color: #fcf1d3;
				}
			}
		}
	}
}
</style>
